<script lang="ts">
import { defineComponent } from "vue";
export default defineComponent({
  name: "LineItem",
});
</script>
<script setup lang="ts">
import { ref, onMounted, onUnmounted } from "vue";
const heightCount = ref(["30%", "60%", "100%", "60%", "30%"]);
const heightCount1 = ref(["30%", "60%", "100%", "60%", "30%"]);
const heightCount2 = ref(["30%", "60%", "100%", "60%", "30%"]);
const heightCount3 = ref(["30%", "60%", "100%", "60%", "30%"]);
const heightCount4 = ref(["30%", "60%", "100%", "60%", "30%"]);

const getRandowHeight = () => {
  let arr = [];
  const num1 = [10, 30, 50, 30, 10];
  const num2 = [50, 80, 100, 80, 50];
  for (let i = 0; i < 5; i++) {
    arr.push(Math.round(getRandomArbitrary(num1[i], num2[i])) + "%");
  }
  return arr;
};
//生成随机数
const getRandomArbitrary = (min: number, max: number) => {
  return Math.random() * (max - min) + min;
};
const interId = ref(0);
const getHeight = () => {
  interId.value = setInterval(() => {
    heightCount.value = getRandowHeight();
    heightCount1.value = getRandowHeight();
    heightCount2.value = getRandowHeight();
    heightCount3.value = getRandowHeight();
  }, 150);
};
const close = () => {
  clearInterval(interId.value);
  heightCount.value = ["30%", "60%", "100%", "60%", "30%"];
  heightCount1.value = ["30%", "60%", "100%", "60%", "30%"];
  heightCount2.value = ["30%", "60%", "100%", "60%", "30%"];
  heightCount3.value = ["30%", "60%", "100%", "60%", "30%"];
};

defineExpose({
  getHeight,
  close,
});
onMounted(() => {
  getHeight();
});
onUnmounted(() => {
  close();
});
</script>

<template>
  <view class="LineBox">
    <view class="lineWrap">
      <view class="lineItem" :style="{ height: heightCount[0] }"></view>
      <view class="lineItem" :style="{ height: heightCount[1] }"></view>
      <view class="lineItem" :style="{ height: heightCount[2] }"></view>
      <view class="lineItem" :style="{ height: heightCount[3] }"></view>
      <view class="lineItem" :style="{ height: heightCount[4] }"></view>
    </view>
    <view class="lineWrap">
      <view class="lineItem" :style="{ height: heightCount1[0] }"></view>
      <view class="lineItem" :style="{ height: heightCount1[1] }"></view>
      <view class="lineItem" :style="{ height: heightCount1[2] }"></view>
      <view class="lineItem" :style="{ height: heightCount1[3] }"></view>
      <view class="lineItem" :style="{ height: heightCount1[4] }"></view>
    </view>
    <view class="lineWrap">
      <view class="lineItem" :style="{ height: heightCount2[0] }"></view>
      <view class="lineItem" :style="{ height: heightCount2[1] }"></view>
      <view class="lineItem" :style="{ height: heightCount2[2] }"></view>
      <view class="lineItem" :style="{ height: heightCount2[3] }"></view>
      <view class="lineItem" :style="{ height: heightCount2[4] }"></view>
    </view>
    <view class="lineWrap">
      <view class="lineItem2" :style="{ height: heightCount3[0] }"></view>
      <view class="lineItem2" :style="{ height: heightCount3[1] }"></view>
      <view class="lineItem2" :style="{ height: heightCount3[2] }"></view>
      <view class="lineItem2" :style="{ height: heightCount3[3] }"></view>
      <view class="lineItem2" :style="{ height: heightCount3[4] }"></view>
    </view>
  </view>
</template>

<style lang="scss">
.LineBox {
  display: flex;
  width: 120rpx;
}
.lineWrap {
  width: 30rpx;
  display: flex;
  height: 38rpx;
  align-items: center;
  .lineItem {
    transition: height 150ms linear;
    margin-left: 4rpx;
    width: 1rpx;
    background-color: #ff7900;
  }
  .lineItem2 {
    transition: height 150ms linear;
    margin-left: 4rpx;
    width: 1rpx;
    background-color: #ff9863;
  }
}
</style>
